const circleProgressBar = CircleProgressBar();

let p = 0;
let t = setInterval(() => {
  circleProgressBar(++p);
}, 300);

function CircleProgressBar() {
  const oLeftCircleBar = getCricleBar('left');
  const oRightCircleBar = getCricleBar('right'),
    oTitle = document.querySelector('.circle-progressbar .title');

  //获取指定方向的内部节点
  function getCricleBar(dir) {
    return document.querySelector(
      `.circle-progressbar .${dir}-wrapper .circle-bar`
    );
  }

  function formatDegree(percent) {
    return `rotate(${-135 + (360 / 100) * percent}deg)`;
  }

  function setRotate(node, percent) {
    node.style.transform = formatDegree(percent);
  }

  return function (percent) {
    //0-50
    if (percent >= 0 && percent <= 50) {
      //设置右侧盒子
      setRotate(oRightCircleBar, percent);
    } else if (percent > 50 && percent <= 100) {
      //50-100
      //设置左侧盒子
      setRotate(oLeftCircleBar, percent - 50);
    }

    //0-100
    if (percent >= 0 && percent <= 100) {
      oTitle.innerText = percent + '%';
    }
  };
}
